<template>
  <el-form class="basic-form" label-width="100px" :model="formData">
    <!--登录名-->
    <el-form-item :label="$t('PersonCenter.loginName')" prop="loginName">
      <el-input v-show="isEdit" v-model="formData.loginName" disabled />
      <span v-show="!isEdit">{{ user.loginName }}</span>
    </el-form-item>
    <!--真实姓名-->
    <el-form-item :label="$t('PersonCenter.userName')" prop="userName">
      <el-input v-show="isEdit" v-model="formData.userName" />
      <span v-show="!isEdit">{{ user.userName }}</span>
    </el-form-item>
    <!--用户别名-->
    <el-form-item :label="$t('PersonCenter.alias')" prop="alias">
      <el-input v-show="isEdit" v-model="formData.alias" />
      <span v-show="!isEdit">{{ user.alias }}</span>
    </el-form-item>
    <!--性别-->
    <el-form-item :label="$t('PersonCenter.sex')">
      <el-select
        v-show="isEdit"
        v-model="formData.sex"
        :placeholder="$t('select.placeholder')"
        style="width: 100%"
      >
        <el-option
          v-for="item in $store.getters['dict/dictOptions']('01')"
          :key="item.code"
          :label="item.value"
          :value="item.code"
        />
      </el-select>
      <span v-show="!isEdit">{{ $store.getters['dict/dictValue'](user.sex) }}</span>
    </el-form-item>
    <!--手机号码-->
    <el-form-item :label="$t('PersonCenter.mobile')" prop="mobile">
      <el-input v-show="isEdit" v-model="formData.mobile" />
      <span v-show="!isEdit">{{ user.mobile }}</span>
    </el-form-item>
    <!--电话号码-->
    <el-form-item :label="$t('PersonCenter.tel')" prop="tel">
      <el-input v-show="isEdit" v-model="formData.tel" />
      <span v-show="!isEdit">{{ user.tel }}</span>
    </el-form-item>
    <!--电子邮箱-->
    <el-form-item :label="$t('PersonCenter.email')" prop="email">
      <el-input v-show="isEdit" v-model="formData.email" />
      <span v-show="!isEdit">{{ user.email }}</span>
    </el-form-item>
    <!--创建时间-->
    <el-form-item :label="$t('PersonCenter.createTime')">
      <el-input v-show="isEdit" v-model="formData.createTime" disabled />
      <span v-show="!isEdit">{{ user.createTime }}</span>
    </el-form-item>
    <el-form-item>
      <el-button v-if="!isEdit && $hasPer('edit')" type="primary" @click="editUserInfo">
        {{ $t('button.edit') }}
      </el-button>
      <el-button v-if="isEdit" :loading="isRequesting" type="primary" @click="saveUserInfo">
        {{ $t('button.save') }}
      </el-button>
      <el-button v-if="isEdit" type="danger" @click="cancelEdit">
        {{ $t('button.cancel') }}
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { userEditPersonal } from '../../api/sys/user'

export default {
  name: 'PersonCenter',
  data() {
    return {
      // 正在查询
      isRequesting: false,
      // 是否正在编辑
      isEdit: false,
      // 表单数据
      formData: {
        // 用户编号
        userId: '',
        // 用户登录名
        loginName: '',
        // 用户名
        userName: '',
        // 用户别名
        alias: '',
        // 性别
        sex: '',
        // 手机号码
        mobile: '',
        // 电话号码
        tel: '',
        // 电子邮箱
        email: '',
        // 创建时间
        createTime: ''
      }
    }
  },
  computed: {
    user() {
      return this.$store.getters['user/getSessionUser']
    }
  },
  created() {},
  mounted() {},
  methods: {
    editUserInfo() {
      this.formData = JSON.parse(JSON.stringify(this.user))
      this.isEdit = true
    },
    cancelEdit() {
      this.formData = JSON.parse(JSON.stringify(this.user))
      this.isEdit = false
    },
    async saveUserInfo() {
      try {
        this.isRequesting = true
        await userEditPersonal(this.formData, { msgSuccess: true, msgError: true })
        await this.$store.dispatch('user/initSessionUser')
        this.isEdit = false
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    }
  }
}
</script>

<style scoped>
.basic-form {
  text-align: left;
  width: 30%;
  margin-top: 20px;
}

.basic-form span {
  margin-left: 15px;
  color: blue;
}
</style>
